<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="用户号" prop="userId">
        <el-input v-model="queryParams.userId" placeholder="请输入用户号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="用户名称" prop="userName">
        <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="用水类型" prop="priceType">
        <el-select v-model="queryParams.priceType" placeholder="请选择用水类型" clearable>
          <el-option v-for="dict in dict.type.price_type" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="价格编号" prop="priceCode">
        <el-input v-model="queryParams.priceCode" placeholder="请输入价格编号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item> -->
      <el-form-item label="受理编号" prop="acceptCode">
        <el-input v-model="queryParams.acceptCode" placeholder="请输入受理编号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <!-- <el-form-item label="项目名称" prop="projectName">
        <el-input
          v-model="queryParams.projectName"
          placeholder="请输入项目名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="用水地址" prop="waterAddress">
        <el-input
          v-model="queryParams.waterAddress"
          placeholder="请输入用水地址"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="法定代表人" prop="legalPerson">
        <el-input
          v-model="queryParams.legalPerson"
          placeholder="请输入法定代表人"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="经办人" prop="responsiblePerson">
        <el-input
          v-model="queryParams.responsiblePerson"
          placeholder="请输入经办人"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="联系方式" prop="contactInfo">
        <el-input
          v-model="queryParams.contactInfo"
          placeholder="请输入联系方式"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item label="客户类型" prop="userType">
        <el-select v-model="queryParams.userType" placeholder="请选择客户类型" clearable>
          <el-option v-for="dict in dict.type.user_type" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="给水类别" prop="supplyType">
        <el-select v-model="queryParams.supplyType" placeholder="请选择给水类别" clearable>
          <el-option v-for="dict in dict.type.supply_type" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['installation:waterUser:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['installation:waterUser:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['installation:waterUser:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['installation:waterUser:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>



    <el-table v-loading="loading" :data="waterUserList" @selection-change="handleSelectionChange"
      :default-sort="defaultSort" @sort-change="handleSortChange" height="600px" style="width: 100%">
      <el-table-column type="selection" width="55" align="center" />

      <el-table-column label="用户号" align="center" width="100" fixed="left">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.userId || ''" placement="top"
            v-if="scope.row.userId && scope.row.userId.length > 30">
            <template #content>
              <div style="max-width: 300px; word-break: break-all;">{{ scope.row.userId }}</div>
            </template>
            <span class="text-ellipsis">{{ scope.row.userId }}</span>
          </el-tooltip>
          <span v-else>{{ scope.row.userId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="用户名称" align="center" width="120" fixed="left" prop="userName" sortable="custom"
        :sort-orders="['descending', 'ascending']">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.userName || ''" placement="top"
            v-if="scope.row.userName && scope.row.userName.length > 30">
            <template #content>
              <div style="max-width: 300px; word-break: break-all;">{{ scope.row.userName }}</div>
            </template>
            <span class="text-ellipsis">{{ scope.row.userName }}</span>
          </el-tooltip>
          <span v-else>{{ scope.row.userName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="用水类型" align="center" width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.price_type" :value="scope.row.priceType" />
        </template>
      </el-table-column>

      <el-table-column label="受理编号" align="center" width="100">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.acceptCode || ''" placement="top"
            v-if="scope.row.acceptCode && scope.row.acceptCode.length > 30">
            <template #content>
              <div style="max-width: 300px; word-break: break-all;">{{ scope.row.acceptCode }}</div>
            </template>
            <span class="text-ellipsis">{{ scope.row.acceptCode }}</span>
          </el-tooltip>
          <span v-else>{{ scope.row.acceptCode }}</span>
        </template>
      </el-table-column>

      <el-table-column label="项目名称" align="center" sortable="custom" prop="projectName"
        :sort-orders="['descending', 'ascending']" width="150">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.projectName || ''" placement="top"
            v-if="scope.row.projectName && scope.row.projectName.length > 30">
            <template #content>
              <div style="max-width: 300px; word-break: break-all;">{{ scope.row.projectName }}</div>
            </template>
            <span class="text-ellipsis">{{ scope.row.projectName }}</span>
          </el-tooltip>
          <span v-else>{{ scope.row.projectName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="用水地址" align="center" width="150">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.waterAddress || ''" placement="top"
            v-if="scope.row.waterAddress && scope.row.waterAddress.length > 30">
            <template #content>
              <div style="max-width: 300px; word-break: break-all;">{{ scope.row.waterAddress }}</div>
            </template>
            <span class="text-ellipsis">{{ scope.row.waterAddress }}</span>
          </el-tooltip>
          <span v-else>{{ scope.row.waterAddress }}</span>
        </template>
      </el-table-column>

      <el-table-column label="法定代表人" align="center" width="100">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.legalPerson || ''" placement="top"
            v-if="scope.row.legalPerson && scope.row.legalPerson.length > 30">
            <template #content>
              <div style="max-width: 300px; word-break: break-all;">{{ scope.row.legalPerson }}</div>
            </template>
            <span class="text-ellipsis">{{ scope.row.legalPerson }}</span>
          </el-tooltip>
          <span v-else>{{ scope.row.legalPerson }}</span>
        </template>
      </el-table-column>

      <el-table-column label="经办人" align="center" width="100">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.responsiblePerson || ''" placement="top"
            v-if="scope.row.responsiblePerson && scope.row.responsiblePerson.length > 30">
            <template #content>
              <div style="max-width: 300px; word-break: break-all;">{{ scope.row.responsiblePerson }}</div>
            </template>
            <span class="text-ellipsis">{{ scope.row.responsiblePerson }}</span>
          </el-tooltip>
          <span v-else>{{ scope.row.responsiblePerson }}</span>
        </template>
      </el-table-column>

      <el-table-column label="联系方式" align="center" width="120">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.contactInfo || ''" placement="top"
            v-if="scope.row.contactInfo && scope.row.contactInfo.length > 30">
            <template #content>
              <div style="max-width: 300px; word-break: break-all;">{{ scope.row.contactInfo }}</div>
            </template>
            <span class="text-ellipsis">{{ scope.row.contactInfo }}</span>
          </el-tooltip>
          <span v-else>{{ scope.row.contactInfo }}</span>
        </template>
      </el-table-column>

      <el-table-column label="客户类型" align="center" width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.user_type" :value="scope.row.userType" />
        </template>
      </el-table-column>

      <el-table-column label="给水类别" align="center" width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.supply_type" :value="scope.row.supplyType" />
        </template>
      </el-table-column>

      <el-table-column label="临时用水日期起始" align="center" width="120">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.tempWaterDateStart, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>

      <el-table-column label="临时用水日期结束" align="center" width="120">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.tempWaterDateEnd, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>

      <el-table-column label="正式用水日期" align="center" width="120">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.officialWaterDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>

      <el-table-column label="改装申请原表户名" align="center" width="120">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.oldUserName || ''" placement="top"
            v-if="scope.row.oldUserName && scope.row.oldUserName.length > 30">
            <template #content>
              <div style="max-width: 300px; word-break: break-all;">{{ scope.row.oldUserName }}</div>
            </template>
            <span class="text-ellipsis">{{ scope.row.oldUserName }}</span>
          </el-tooltip>
          <span v-else>{{ scope.row.oldUserName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="建筑许可证材料名称" align="center" width="150">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.constructionPermitName || ''" placement="top"
            v-if="scope.row.constructionPermitName && scope.row.constructionPermitName.length > 30">
            <template #content>
              <div style="max-width: 300px; word-break: break-all;">{{ scope.row.constructionPermitName }}</div>
            </template>
            <span class="text-ellipsis">{{ scope.row.constructionPermitName }}</span>
          </el-tooltip>
          <span v-else>{{ scope.row.constructionPermitName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="建设期计划用水人数" align="center" prop="constructionUserNum" width="120" />
      <el-table-column label="建设期用水量" align="center" prop="constructionWaterNum" width="120" />
      <el-table-column label="运营期计划用水人数" align="center" prop="operationUserNum" width="120" />
      <el-table-column label="运营期用水量" align="center" prop="operationWaterNum" width="120" />
      <el-table-column label="运营期非居民用水量" align="center" prop="operationUserResidentNum" width="140" />
      <el-table-column label="运营期居民用水量" align="center" prop="operationUserBusinessNum" width="140" />

      <el-table-column label="接驳口位置说明" align="center" width="150">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.portLocation || ''" placement="top"
            v-if="scope.row.portLocation && scope.row.portLocation.length > 30">
            <template #content>
              <div style="max-width: 300px; word-break: break-all;">{{ scope.row.portLocation }}</div>
            </template>
            <span class="text-ellipsis">{{ scope.row.portLocation }}</span>
          </el-tooltip>
          <span v-else>{{ scope.row.portLocation }}</span>
        </template>
      </el-table-column>

      <el-table-column label="接水示意图" align="center" width="100">
        <template slot-scope="scope">
          <image-preview :src="scope.row.waterPic" :width="50" :height="50" />
        </template>
      </el-table-column>

      <!-- <el-table-column label="规划部建设工程规划许可证" align="center" width="180">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.buildLicence || ''" placement="top"
            v-if="scope.row.buildLicence && scope.row.buildLicence.length > 30">
            <template #content>
              <div style="max-width: 300px; word-break: break-all;">{{ scope.row.buildLicence }}</div>
            </template>
            <span class="text-ellipsis">{{ scope.row.buildLicence }}</span>
          </el-tooltip>
          <span v-else>{{ scope.row.buildLicence }}</span>
        </template>
      </el-table-column>

      <el-table-column label="建设项目规划选址定位图或产权证明文件" align="center" width="200">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.titleDeed || ''" placement="top"
            v-if="scope.row.titleDeed && scope.row.titleDeed.length > 30">
            <template #content>
              <div style="max-width: 300px; word-break: break-all;">{{ scope.row.titleDeed }}</div>
            </template>
            <span class="text-ellipsis">{{ scope.row.titleDeed }}</span>
          </el-tooltip>
          <span v-else>{{ scope.row.titleDeed }}</span>
        </template>
      </el-table-column>


      <el-table-column label="市政建设配套费" align="center" width="120">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.constructionCost || ''" placement="top"
            v-if="scope.row.constructionCost && scope.row.constructionCost.length > 30">
            <template #content>
              <div style="max-width: 300px; word-break: break-all;">{{ scope.row.constructionCost }}</div>
            </template>
            <span class="text-ellipsis">{{ scope.row.constructionCost }}</span>
          </el-tooltip>
          <span v-else>{{ scope.row.constructionCost }}</span>
        </template>
      </el-table-column>

      <el-table-column label="用水项目建筑总平面图电子版和蓝图" align="center" width="180">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.blueDesign || ''" placement="top"
            v-if="scope.row.blueDesign && scope.row.blueDesign.length > 30">
            <template #content>
              <div style="max-width: 300px; word-break: break-all;">{{ scope.row.blueDesign }}</div>
            </template>
            <span class="text-ellipsis">{{ scope.row.blueDesign }}</span>
          </el-tooltip>
          <span v-else>{{ scope.row.blueDesign }}</span>
        </template>
      </el-table-column> -->



      <el-table-column label="规划部建设工程规划许可证" align="center" width="180">
        <template slot-scope="scope">
          <div v-if="scope.row.buildLicence">
            <!-- 处理多个文件的情况 -->
            <div v-for="(filePath, index) in scope.row.buildLicence.split(',')" :key="index">
              <el-link type="primary" :underline="false" @click="previewFile(filePath.trim())" class="file-link">
                <i class="el-icon-document"></i>
                {{ getFileName(filePath.trim()) }}
              </el-link>
            </div>
          </div>
          <span v-else>-</span>
        </template>
      </el-table-column>

      <el-table-column label="建设项目规划选址定位图或产权证明文件" align="center" width="200">
        <template slot-scope="scope">
          <div v-if="scope.row.titleDeed">
            <!-- 处理多个文件的情况 -->
            <div v-for="(filePath, index) in scope.row.titleDeed.split(',')" :key="index">
              <el-link type="primary" :underline="false" @click="previewFile(filePath.trim())" class="file-link">
                <i class="el-icon-document"></i>
                {{ getFileName(filePath.trim()) }}
              </el-link>
            </div>
          </div>
          <span v-else>-</span>
        </template>
      </el-table-column>

      <el-table-column label="市政建设配套费" align="center" width="120">
        <template slot-scope="scope">
          <div v-if="scope.row.constructionCost">
            <!-- 处理多个文件的情况 -->
            <div v-for="(filePath, index) in scope.row.constructionCost.split(',')" :key="index">
              <el-link type="primary" :underline="false" @click="previewFile(filePath.trim())" class="file-link">
                <i class="el-icon-document"></i>
                {{ getFileName(filePath.trim()) }}
              </el-link>
            </div>
          </div>
          <span v-else>-</span>
        </template>
      </el-table-column>

      <el-table-column label="用水项目建筑总平面图电子版和蓝图" align="center" width="180">
        <template slot-scope="scope">
          <div v-if="scope.row.blueDesign">
            <!-- 处理多个文件的情况 -->
            <div v-for="(filePath, index) in scope.row.blueDesign.split(',')" :key="index">
              <el-link type="primary" :underline="false" @click="previewFile(filePath.trim())" class="file-link">
                <i class="el-icon-document"></i>
                {{ getFileName(filePath.trim()) }}
              </el-link>
            </div>
          </div>
          <span v-else>-</span>
        </template>
      </el-table-column>
















      <el-table-column label="用水项目综合管线及给排水专业图" align="center" width="180">
        <template slot-scope="scope">
          <div v-if="scope.row.waterSupplyPic">
            <!-- 处理多个文件的情况 -->
            <div v-for="(filePath, index) in scope.row.waterSupplyPic.split(',')" :key="index">
              <el-link type="primary" :underline="false" @click="previewFile(filePath.trim())" class="file-link">
                <i class="el-icon-document"></i>
                {{ getFileName(filePath.trim()) }}
              </el-link>
            </div>
          </div>
          <span v-else>-</span>
        </template>
      </el-table-column>


      <el-table-column label="用水项目给排水底层平面图" align="center" width="180">
        <template slot-scope="scope">
          <div v-if="scope.row.waterUnderPic">
            <!-- 处理多个文件的情况 -->
            <div v-for="(filePath, index) in scope.row.waterUnderPic.split(',')" :key="index">
              <el-link type="primary" :underline="false" @click="previewFile(filePath.trim())" class="file-link">
                <i class="el-icon-document"></i>
                {{ getFileName(filePath.trim()) }}
              </el-link>
            </div>
          </div>
          <span v-else>-</span>
        </template>
      </el-table-column>

      <el-table-column label="营业执照" align="center" width="120">
        <template slot-scope="scope">
          <div v-if="scope.row.businessLicense">
            <!-- 处理多个文件的情况 -->
            <div v-for="(filePath, index) in scope.row.businessLicense.split(',')" :key="index">
              <el-link type="primary" :underline="false" @click="previewFile(filePath.trim())" class="file-link">
                <i class="el-icon-document"></i>
                {{ getFileName(filePath.trim()) }}
              </el-link>
            </div>
          </div>
          <span v-else>-</span>
        </template>
      </el-table-column>

      <el-table-column label="法定代表人身份证复印件" align="center" width="160">
        <template slot-scope="scope">
          <div v-if="scope.row.legalPersonLicense">
            <!-- 处理多个文件的情况 -->
            <div v-for="(filePath, index) in scope.row.legalPersonLicense.split(',')" :key="index">
              <el-link type="primary" :underline="false" @click="previewFile(filePath.trim())" class="file-link">
                <i class="el-icon-document"></i>
                {{ getFileName(filePath.trim()) }}
              </el-link>
            </div>
          </div>
          <span v-else>-</span>
        </template>
      </el-table-column>

      <el-table-column label="经办人身份证复印件" align="center" width="140">
        <template slot-scope="scope">
          <div v-if="scope.row.handlelPersonLicense">
            <!-- 处理多个文件的情况 -->
            <div v-for="(filePath, index) in scope.row.handlelPersonLicense.split(',')" :key="index">
              <el-link type="primary" :underline="false" @click="previewFile(filePath.trim())" class="file-link">
                <i class="el-icon-document"></i>
                {{ getFileName(filePath.trim()) }}
              </el-link>
            </div>
          </div>
          <span v-else>-</span>
        </template>
      </el-table-column>

      <el-table-column label="用水报装信息登记表" align="center" width="140">
        <template slot-scope="scope">
          <div v-if="scope.row.moreLicense">
            <!-- 处理多个文件的情况 -->
            <div v-for="(filePath, index) in scope.row.moreLicense.split(',')" :key="index">
              <el-link type="primary" :underline="false" @click="previewFile(filePath.trim())" class="file-link">
                <i class="el-icon-document"></i>
                {{ getFileName(filePath.trim()) }}
              </el-link>
            </div>
          </div>
          <span v-else>-</span>
        </template>
      </el-table-column>

      <!-- <el-table-column label="用水项目综合管线及给排水专业图" align="center" width="180">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.waterSupplyPic || ''" placement="top"
            v-if="scope.row.waterSupplyPic && scope.row.waterSupplyPic.length > 30">
            <template #content>
              <div style="max-width: 300px; word-break: break-all;">{{ scope.row.waterSupplyPic }}</div>
            </template>
            <span class="text-ellipsis">{{ scope.row.waterSupplyPic }}</span>
          </el-tooltip>
          <span v-else>{{ scope.row.waterSupplyPic }}</span>
        </template>
      </el-table-column> -->



      <!-- <el-table-column label="用水项目给排水底层平面图" align="center" width="180">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.waterUnderPic || ''" placement="top"
            v-if="scope.row.waterUnderPic && scope.row.waterUnderPic.length > 30">
            <template #content>
              <div style="max-width: 300px; word-break: break-all;">{{ scope.row.waterUnderPic }}</div>
            </template>
            <span class="text-ellipsis">{{ scope.row.waterUnderPic }}</span>
          </el-tooltip>
          <span v-else>{{ scope.row.waterUnderPic }}</span>
        </template>
      </el-table-column>

      <el-table-column label="营业执照" align="center" width="120">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.businessLicense || ''" placement="top"
            v-if="scope.row.businessLicense && scope.row.businessLicense.length > 30">
            <template #content>
              <div style="max-width: 300px; word-break: break-all;">{{ scope.row.businessLicense }}</div>
            </template>
            <span class="text-ellipsis">{{ scope.row.businessLicense }}</span>
          </el-tooltip>
          <span v-else>{{ scope.row.businessLicense }}</span>
        </template>
      </el-table-column>

      <el-table-column label="法定代表人身份证复印件" align="center" width="160">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.legalPersonLicense || ''" placement="top"
            v-if="scope.row.legalPersonLicense && scope.row.legalPersonLicense.length > 30">
            <template #content>
              <div style="max-width: 300px; word-break: break-all;">{{ scope.row.legalPersonLicense }}</div>
            </template>
            <span class="text-ellipsis">{{ scope.row.legalPersonLicense }}</span>
          </el-tooltip>
          <span v-else>{{ scope.row.legalPersonLicense }}</span>
        </template>
      </el-table-column>

      <el-table-column label="经办人身份证复印件" align="center" width="140">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.handlelPersonLicense || ''" placement="top"
            v-if="scope.row.handlelPersonLicense && scope.row.handlelPersonLicense.length > 30">
            <template #content>
              <div style="max-width: 300px; word-break: break-all;">{{ scope.row.handlelPersonLicense }}</div>
            </template>
            <span class="text-ellipsis">{{ scope.row.handlelPersonLicense }}</span>
          </el-tooltip>
          <span v-else>{{ scope.row.handlelPersonLicense }}</span>
        </template>
      </el-table-column>

      <el-table-column label="用水报装信息登记表" align="center" width="140">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.moreLicense || ''" placement="top"
            v-if="scope.row.moreLicense && scope.row.moreLicense.length > 30">
            <template #content>
              <div style="max-width: 300px; word-break: break-all;">{{ scope.row.moreLicense }}</div>
            </template>
            <span class="text-ellipsis">{{ scope.row.moreLicense }}</span>
          </el-tooltip>
          <span v-else>{{ scope.row.moreLicense }}</span>
        </template>
      </el-table-column> -->

      <!-- <el-table-column label="居民客户身份证复印件" align="center" width="140">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.personLicense || ''" placement="top"
            v-if="scope.row.personLicense && scope.row.personLicense.length > 30">
            <template #content>
              <div style="max-width: 300px; word-break: break-all;">{{ scope.row.personLicense }}</div>
            </template>
            <span class="text-ellipsis">{{ scope.row.personLicense }}</span>
          </el-tooltip>
          <span v-else>{{ scope.row.personLicense }}</span>
        </template>
      </el-table-column> -->

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
        <template slot-scope="scope">
          <!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpload(scope.row)"
            v-hasPermi="['installation:waterUser:edit']">附件查看</el-button> -->
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['installation:waterUser:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['installation:waterUser:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @open="resetActiveTab">
      <el-tabs v-model="activeTab" type="card">
        <!-- 第一页：基础信息 -->
        <el-tab-pane label="基础信息" name="basic">
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="用户号" prop="userId">
              <el-input v-model="form.userId" placeholder="请输入用户id" />
            </el-form-item>
            <el-form-item label="用户名称" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入用户名称" />
            </el-form-item>
            <el-form-item label="用水类型" prop="priceType">
              <el-select v-model="form.priceType" placeholder="请选择用水类型">
                <el-option v-for="dict in dict.type.price_type" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="价格编号" prop="priceCode">
          <el-input v-model="form.priceCode" placeholder="请输入价格编号" />
        </el-form-item> -->
            <el-form-item label="受理编号" prop="acceptCode">
              <el-input v-model="form.acceptCode" placeholder="请输入受理编号" />
            </el-form-item>
            <el-form-item label="项目名称" prop="projectName">
              <el-input v-model="form.projectName" placeholder="请输入项目名称" />
            </el-form-item>
            <el-form-item label="用水地址" prop="waterAddress">
              <el-input v-model="form.waterAddress" placeholder="请输入用水地址" />
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 第二页：联系信息 -->
        <el-tab-pane label="联系信息" name="contact">
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="法定代表人" prop="legalPerson">
              <el-input v-model="form.legalPerson" placeholder="请输入法定代表人" />
            </el-form-item>
            <el-form-item label="经办人" prop="responsiblePerson">
              <el-input v-model="form.responsiblePerson" placeholder="请输入经办人" />
            </el-form-item>
            <el-form-item label="联系方式" prop="contactInfo">
              <el-input v-model="form.contactInfo" placeholder="请输入联系方式" />
            </el-form-item>
            <el-form-item label="客户类型" prop="userType">
              <el-select v-model="form.userType" placeholder="请选择客户类型">
                <el-option v-for="dict in dict.type.user_type" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="给水类别" prop="supplyType">
              <el-select v-model="form.supplyType" placeholder="请选择给水类别">
                <el-option v-for="dict in dict.type.supply_type" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 第三页：用水信息 -->
        <el-tab-pane label="更多信息" name="water">
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="临时用水日期起始" prop="tempWaterDateStart">
              <el-date-picker v-model="form.tempWaterDateStart" type="date" value-format="yyyy-MM-dd"
                placeholder="请选择临时用水日期起始" @change="handleDateChange('tempWaterDateStart', $event)" />
            </el-form-item>
            <el-form-item label="临时用水日期结束" prop="tempWaterDateEnd">
              <el-date-picker v-model="form.tempWaterDateEnd" type="date" value-format="yyyy-MM-dd"
                placeholder="请选择临时用水日期结束" />
            </el-form-item>
            <el-form-item label="正式用水日期" prop="officialWaterDate">
              <el-date-picker v-model="form.officialWaterDate" type="date" value-format="yyyy-MM-dd"
                placeholder="请选择正式用水日期" />
            </el-form-item>
            <el-form-item label="改装申请原表户名" prop="oldUserName">
              <el-input v-model="form.oldUserName" placeholder="请输入改装申请原表户名" />
            </el-form-item>
            <el-form-item label="建筑许可证材料名称" prop="constructionPermitName">
              <el-input v-model="form.constructionPermitName" placeholder="请输入建筑许可证材料名称" />
            </el-form-item>
            <el-form-item label="建设期计划用水人数(人)" prop="constructionUserNum">
              <el-input v-model="form.constructionUserNum" placeholder="请输入建设期计划用水人数" />
            </el-form-item>
            <el-form-item label="建设期用水量(m³/日)" prop="constructionWaterNum">
              <el-input v-model="form.constructionWaterNum" placeholder="请输入建设期用水量" />
            </el-form-item>
            <el-form-item label="运营期计划用水人数(人)" prop="operationUserNum">
              <el-input v-model="form.operationUserNum" placeholder="请输入运营期计划用水人数" />
            </el-form-item>
            <el-form-item label="运营期用水量(m³/日)" prop="operationWaterNum">
              <el-input v-model="form.operationWaterNum" placeholder="请输入运营期用水量" />
            </el-form-item>
            <el-form-item label="运营期非居民用水量(m³/日)" prop="operationUserResidentNum">
              <el-input v-model="form.operationUserResidentNum" placeholder="请输入运营期非居民用水量" />
            </el-form-item>
            <el-form-item label="运营期居民用水量(m³/日)" prop="operationUserBusinessNum">
              <el-input v-model="form.operationUserBusinessNum" placeholder="请输入运营期居民用水量" />
            </el-form-item>
            <el-form-item label="接驳口位置说明" prop="portLocation">
              <el-input v-model="form.portLocation" placeholder="请输入接驳口位置说明" />
            </el-form-item>
            <el-form-item label="接水示意图" prop="waterPic">
              <image-upload v-model="form.waterPic" />
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 第四页：附件信息 -->
        <el-tab-pane label="容缺信息" name="attachment">
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="规划部建设工程规划许可证" prop="buildLicence">
              <file-upload v-model="form.buildLicence" />
            </el-form-item>
            <el-form-item label="建设项目规划选址定位图或产权证明文件" prop="titleDeed">
              <file-upload v-model="form.titleDeed" />
            </el-form-item>
            <el-form-item label="市政建设配套费" prop="constructionCost">
              <!-- <el-input v-model="form.constructionCost" placeholder="请输入市政建设配套费" /> -->
              <file-upload v-model="form.constructionCost" />
            </el-form-item>
            <el-form-item label="用水项目建筑总平面图电子版和蓝图">
              <!-- <editor v-model="form.blueDesign" :min-height="192" /> -->
              <file-upload v-model="form.blueDesign" />
            </el-form-item>
            <el-form-item label="用水项目综合管线及给排水专业图" prop="waterSupplyPic">
              <file-upload v-model="form.waterSupplyPic" />
            </el-form-item>

            <el-form-item label="用水项目给排水底层平面图" prop="waterUnderPic">
              <!-- <image-upload v-model="form.waterUnderPic" /> -->
              <file-upload v-model="form.waterUnderPic" />
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 第五页：附件信息 -->
        <el-tab-pane label="附件信息" name="more">
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="营业执照" prop="businessLicense">
              <file-upload v-model="form.businessLicense" />
            </el-form-item>
            <el-form-item label="法定代表人身份证复印件" prop="legalPersonLicense">
              <file-upload v-model="form.legalPersonLicense" />
            </el-form-item>
            <el-form-item label="经办人身份证复印件" prop="handlelPersonLicense">
              <file-upload v-model="form.handlelPersonLicense" />
            </el-form-item>
            <!-- <el-form-item label="居民客户身份证复印件" prop="personLicense">
              <file-upload v-model="form.personLicense" />
            </el-form-item> -->
            <el-form-item label="用水报装信息登记表" prop="moreLicense">
              <file-upload v-model="form.moreLicense" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


    <!-- 附件下载弹窗 -->
    <el-dialog :title="title" :visible.sync="downloadOpen" width="800px" append-to-body>
      <el-form ref="uploadForm" :model="formUpload" label-width="120px">

        <div style="color: #f56c6c; font-size: 15px; margin-top: 4px;">
          <i class="el-icon-warning-outline"></i> 若有提交附件点击可进行下载查看
        </div>

        <!-- 规划部建设工程规划许可证 -->
        <el-form-item label="建设工程规划许可证" prop="buildLicence">
          <file-upload v-model="formUpload.buildLicence" :file-list="buildLicenceList" :readonly="true" :limit="5"
            :on-preview="handlePreview" />
        </el-form-item>

        <!-- 建设项目规划选址定位图或产权证明文件 -->
        <el-form-item label="规划选址或产权证明" prop="titleDeed">
          <file-upload v-model="formUpload.titleDeed" :file-list="titleDeedList" :readonly="true" :limit="5"
            :on-preview="handlePreview" />
        </el-form-item>

        <!-- 市政建设配套费 -->
        <el-form-item label="市政建设配套费" prop="constructionCost">
          <file-upload v-model="formUpload.constructionCost" :file-list="constructionCostList" :readonly="true"
            :limit="5" :on-preview="handlePreview" />
        </el-form-item>

        <!-- 用水项目建筑总平面图电子版和蓝图 -->
        <el-form-item label="建筑总平面图" prop="blueDesign">
          <file-upload v-model="formUpload.blueDesign" :file-list="blueDesignList" :readonly="true" :limit="5"
            :on-preview="handlePreview" />
        </el-form-item>

        <!-- 用水项目综合管线及给排水专业图 -->
        <el-form-item label="综合管线及给排水图" prop="waterSupplyPic">
          <file-upload v-model="formUpload.waterSupplyPic" :file-list="waterSupplyPicList" :readonly="true" :limit="5"
            :on-preview="handlePreview" />
        </el-form-item>

        <!-- 用水项目给排水底层平面图 -->
        <el-form-item label="给排水底层平面图" prop="waterUnderPic">
          <file-upload v-model="formUpload.waterUnderPic" :file-list="waterUnderPicList" :readonly="true" :limit="5"
            :on-preview="handlePreview" />
        </el-form-item>

        <!-- 营业执照 -->
        <el-form-item label="营业执照" prop="businessLicense">
          <file-upload v-model="formUpload.businessLicense" :file-list="businessLicenseList" :readonly="true" :limit="5"
            :on-preview="handlePreview" />
        </el-form-item>

        <!-- 法定代表人身份证复印件 -->
        <el-form-item label="法人身份证复印件" prop="legalPersonLicense">
          <file-upload v-model="formUpload.legalPersonLicense" :file-list="legalPersonLicenseList" :readonly="true"
            :limit="5" :on-preview="handlePreview" />
        </el-form-item>

        <!-- 经办人身份证复印件 -->
        <el-form-item label="经办人身份证复印件" prop="handlelPersonLicense">
          <file-upload v-model="formUpload.handlelPersonLicense" :file-list="handlelPersonLicenseList" :readonly="true"
            :limit="5" :on-preview="handlePreview" />
        </el-form-item>

        <!-- 居民客户身份证复印件 -->
        <el-form-item label="居民身份证复印件" prop="moreLicense">
          <file-upload v-model="formUpload.moreLicense" :file-list="moreLicenseList" :readonly="true" :limit="5"
            :on-preview="handlePreview" />
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="handleBatchDownload">批量下载</el-button> -->
        <el-button @click="downloadOpen = false">关 闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { listWaterUser, getWaterUser, delWaterUser, addWaterUser, updateWaterUser } from "@/api/installation/waterUser";
  // import DWGUpload from '@/components/DWGUpload/index.vue'

  export default {
    // components: { DWGUpload },
    name: "WaterUser",
    dicts: ['price_type', 'supply_type', 'user_type'],
    data() {
      return {
        activeTab: 'basic', // 默认激活基础信息页
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 默认排序
        defaultSort: { prop: 'create_time', order: 'descending' },
        // 总条数
        total: 0,
        // 用户档案表格数据
        waterUserList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 附件下载弹窗显示状态
        downloadOpen: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          userId: null,
          userName: null,
          priceType: null,
          priceCode: null,
          acceptCode: null,
          projectName: null,
          waterAddress: null,
          legalPerson: null,
          responsiblePerson: null,
          contactInfo: null,
          userType: null,
          supplyType: null,
          tempWaterDateStart: null,
          tempWaterDateEnd: null,
          officialWaterDate: null,
          oldUserName: null,
          constructionPermitName: null,
          constructionUserNum: null,
          constructionWaterNum: null,
          operationUserNum: null,
          operationWaterNum: null,
          operationUserResidentNum: null,
          operationUserBusinessNum: null,
          portLocation: null,
          waterPic: null,
          buildLicence: null,
          titleDeed: null,
          constructionCost: null,
          blueDesign: null,
          waterSupplyPic: null,
          waterUnderPic: null,
          createdBy: null,
          createdTime: null,
          updatedBy: null,
          updatedTime: null
        },
        // 表单参数
        form: {
          waterSupplyPic: [] // 必须初始化为数组
        },
        formUpload: {
        },
        // 表单校验
        rules: {
        }
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询用户档案列表 */
      getList() {
        this.loading = true;
        listWaterUser(this.queryParams).then(response => {
          this.waterUserList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
        this.downloadOpen = false;
        this.resetUpload;
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          companyId: null,
          companyName: null,
          userId: null,
          userName: null,
          priceType: null,
          priceCode: null,
          acceptCode: null,
          projectName: null,
          waterAddress: null,
          legalPerson: null,
          responsiblePerson: null,
          contactInfo: null,
          userType: null,
          supplyType: null,
          tempWaterDateStart: null,
          tempWaterDateEnd: null,
          officialWaterDate: null,
          oldUserName: null,
          constructionPermitName: null,
          constructionUserNum: null,
          constructionWaterNum: null,
          operationUserNum: null,
          operationWaterNum: null,
          operationUserResidentNum: null,
          operationUserBusinessNum: null,
          portLocation: null,
          waterPic: null,
          buildLicence: null,
          titleDeed: null,
          constructionCost: null,
          blueDesign: null,
          waterSupplyPic: null,
          waterUnderPic: null,
          createdBy: null,
          createdTime: null,
          updatedBy: null,
          updatedTime: null
        };
        this.resetForm("form");
      },
      // 表单重置
      resetUpload() {
        this.formUpload = {
          id: null,
          waterPic: null,
          buildLicence: null,
          titleDeed: null,
          constructionCost: null,
          blueDesign: null,
          waterSupplyPic: null,
          waterUnderPic: null,
          businessLicense: null,
          legalPersonLicense: null,
          handlelPersonLicense: null,
          moreLicense: null
        };
        this.resetForm("formUpload");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 排序触发事件 */
      handleSortChange(column, prop, order) {
        this.queryParams.orderByColumn = column.prop;
        this.queryParams.isAsc = column.order;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加用户档案";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getWaterUser(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改用户档案";
        });
      },
      /** 附件下载按钮操作 */
      handleUpload(row) {
        this.resetUpload();
        const id = row.id || this.ids
        getWaterUser(id).then(response => {
          this.formUpload = response.data;
          this.downloadOpen = true;
          this.title = "附件查看";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateWaterUser(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addWaterUser(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除用户档案编号为"' + ids + '"的数据项？').then(function () {
          return delWaterUser(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => { });
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('installation/waterUser/export', {
          ...this.queryParams
        }, `waterUser_${new Date().getTime()}.xlsx`)
      },
      handleDateChange(fieldName, value) {
        if (value === null) {
          this.$set(this.form, fieldName, '');
        }
      }




      ,
      // // 从文件路径中提取文件名
      // getFileName(filePath) {
      //   if (!filePath) return '';
      //   // 处理路径，获取文件名
      //   const pathParts = filePath.split('/');
      //   let fileName = pathParts[pathParts.length - 1];
      //   // 移除时间戳后缀（根据你的文件命名格式）
      //   fileName = fileName.replace(/_[\d]{14}[A-Z][\d]{3}/, '');
      //   return fileName;
      // },

      // // 文件预览方法
      // previewFile(filePath) {
      //   if (!filePath) return;

      //   // 获取文件完整URL
      //   const fullUrl = this.getFullFileUrl(filePath);

      //   // 所有文件类型都直接下载
      //   this.downloadFile(fullUrl, filePath);
      // },

      // // 获取完整文件URL
      // getFullFileUrl(filePath) {
      //   // 如果已经是完整URL则直接返回
      //   if (filePath.startsWith('http')) {
      //     return filePath;
      //   }

      //   // 处理路径格式
      //   let processedPath = filePath;
      //   if (!processedPath.startsWith('/')) {
      //     processedPath = '/' + processedPath;
      //   }

      //   // 获取基础API地址
      //   const baseApi = process.env.VUE_APP_BASE_API;
      //   return baseApi + processedPath;
      // },

      // // 文件下载
      // downloadFile(url, originalPath) {
      //   // 创建隐藏的下载链接
      //   const link = document.createElement('a');
      //   link.href = url;
      //   link.target = '_blank';
      //   link.download = this.getFileName(originalPath);

      //   document.body.appendChild(link);
      //   link.click();
      //   document.body.removeChild(link);
      // }




      // 从文件路径中提取文件名
getFileName(filePath) {
  if (!filePath) return '';
  // 处理路径，获取文件名
  const pathParts = filePath.split('/');
  let fileName = pathParts[pathParts.length - 1];
  // 移除时间戳后缀（根据你的文件命名格式）
  fileName = fileName.replace(/_[\d]{14}[A-Z][\d]{3}/, '');
  return fileName;
},

// 文件预览方法
previewFile(filePath) {
  if (!filePath) return;

  // 获取文件完整URL
  const fullUrl = this.getFullFileUrl(filePath);

  // 获取文件扩展名
  const fileExtension = this.getFileExtension(filePath);

  // 只有PDF文件预览，其他都下载
  if (fileExtension === 'pdf') {
    this.previewPdf(fullUrl);
  } else {
    this.downloadFile(fullUrl, filePath);
  }
},

// 获取完整文件URL
getFullFileUrl(filePath) {
  // 如果已经是完整URL则直接返回
  if (filePath.startsWith('http')) {
    return filePath;
  }

  // 处理路径格式
  let processedPath = filePath;
  if (!processedPath.startsWith('/')) {
    processedPath = '/' + processedPath;
  }

  // 获取基础API地址
  const baseApi = process.env.VUE_APP_BASE_API;
  return baseApi + processedPath;
},

// 获取文件扩展名
getFileExtension(filePath) {
  return filePath.split('.').pop().toLowerCase();
},

// PDF预览
previewPdf(url) {
  // 在新窗口打开PDF
  window.open(url, '_blank');
},

// 文件下载
downloadFile(url, originalPath) {
  // 创建隐藏的下载链接
  const link = document.createElement('a');
  link.href = url;
  link.target = '_blank';
  link.download = this.getFileName(originalPath);

  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}
    }
  };
</script>
<style scoped>
  .text-ellipsis {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }
</style>